<template>
  <div :style="{ padding: '0 0 32px 32px', height: '400px' }">
    <div :id="canvasId"></div>
  </div>
</template>

<script>

  const data = [
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
  ];

  import { Pie } from '@antv/g2plot'

  export default {
    data () {
      return {
        canvasId: Math.random().toString(36).slice(-8),
      }
    },
    methods: {
      render () {
        const plot = new Pie(this.canvasId, {
          appendPadding: 10,
          data,
          angleField: 'value',
          colorField: 'type',
          radius: 0.8,
          label: {
            type: 'spider',
            content: '{name}\n{percentage}',
          },
        })
        plot.render()
      },
    },
    mounted () {
      this.render()
    },
  }
</script>
